/* LoadingPage.css */

.loading-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f0f7ff; /* 浅蓝色背景 */
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
  text-align: center;
  padding: 2rem;
  width: 100%;
}


.loading-title {
  font-size: 2rem;
  color: #1e40af; /* 深蓝色标题 */
  margin-bottom: 3rem;
  font-weight: 700;
}

.loading-title span {
  display: inline-block;
  animation: bounce 1.8s ease-in-out infinite; /* 稍慢的弹跳动画 */
}

.loading-title span:nth-child(2) { animation-delay: 0.2s; }
.loading-title span:nth-child(3) { animation-delay: 0.4s; }
.loading-title span:nth-child(4) { animation-delay: 0.6s; }

/* 行走路径 */
.path-container {
  position: relative;
  width: 50%;
  height: 120px;
  margin-bottom: 2.5rem;
}

.path {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #dbeafe; /* 浅蓝色路径 */
  transform: translateY(-50%);
}

/* 路径上的标记点 */
.path-mark {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background-color: #93c5fd; /* 中蓝色标记点 */
  border-radius: 50%;
  transform: translateY(-50%);
}

.path-mark:nth-child(1) { left: 10%; }
.path-mark:nth-child(2) { left: 30%; }
.path-mark:nth-child(3) { left: 50%; }
.path-mark:nth-child(4) { left: 70%; }
.path-mark:nth-child(5) { left: 90%; }

/* 终点标记 */
.path-end {
  position: absolute;
  top: 50%;
  right: 0;
  width: 15px;
  height: 15px;
  background-color: #1e40af; /* 深蓝色终点 */
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.2);
}

/* 卡通小人 */
.walking-character {
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 50px;
  z-index: 2;
  transform: translateY(-70%);
  transition: left 0.15s ease-out; /* 适合1.5秒加载的过渡速度 */
}

/* 小人身体部分 */
.character-head {
  width: 22px;
  height: 22px;
  background-color: #bfdbfe; /* 浅蓝色头部 */
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
}

.character-head::before,
.character-head::after {
  content: '';
  position: absolute;
  top: 8px;
  width: 3px;
  height: 3px;
  background-color: #1e293b;
  border-radius: 50%;
}

.character-head::before { left: 6px; }
.character-head::after { right: 6px; }

.character-body {
  width: 18px;
  height: 20px;
  background-color: #3b82f6; /* 中蓝色身体 */
  border-radius: 5px;
  margin: 2px auto 0;
}

.character-legs, .character-arms {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.character-leg, .character-arm {
  width: 3px;
  background-color: #bfdbfe; /* 浅蓝色四肢 */
  animation: move 0.25s ease-in-out infinite alternate; /* 稍慢的四肢摆动 */
}

.character-leg { height: 14px; }
.character-arm { height: 12px; margin-top: 4px; }

.leg-left, .arm-right { animation-delay: 0.12s; }

/* 状态显示 */
.status-display {
  font-size: 1.1rem;
  color: #1e40af; /* 深蓝色状态文字 */
  margin-bottom: 1.5rem;
  font-weight: 600;
}

.loading-message {
  color: #64748b;
  font-size: 0.95rem;
  padding: 0.8rem 1.2rem;
  background-color: #eff6ff; /* 浅蓝色背景框 */
  border-radius: 8px;
  line-height: 1.6;
}

/* 动画效果 */
@keyframes move {
  0% { transform: rotate(-15deg); transform-origin: top center; }
  100% { transform: rotate(15deg); transform-origin: top center; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse {
  animation: pulse 1.2s ease-in-out infinite;
}
